<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html+css实现侧边栏(全隐藏)</title>
    <link rel="stylesheet" href="../common/reset.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="navbar">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">
            <i class="fa fa-outdent"></i>
        </label>
        <ul>
            <li>
                <img src="./images/thcoding.jpg" alt="">
                <span>代码随想录</span>
            </li>
            <li><a href="javascript:;"><i class="fa fa-home"></i><span>后台首页</span></a></li>
            <li><a href="javascript:;"><i class="fa fa-sitemap"></i><span>商品列表</span></a></li>
            <li><a href="javascript:;"><i class="fa fa-user"></i><span>拥护列表</span></a></li>
            <li><a href="javascript:;"><i class="fa fa-shopping-cart"></i>订单列表<span></span></a></li>
            <li><a href="javascript:;"><i class="fa fa-windows"></i><span>功能列表</span></a></li>
        </ul>
    </div>
</body>

</html>